.box-loading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  > .loading-wrap {
    width: 3%;
    min-width: 80px;

    > .loading-water {
      @keyframes WaterAnim {
        0% {
          opacity: 0;
          transform: scale(0);
        }

        5% {
          opacity: 1;
        }

        100% {
          opacity: 0;
          transform: scale(1);
        }
      }

      position: relative;
      width: 100%;
      aspect-ratio: 1;

      > div {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #279fcf;
        border-radius: 100%;
        opacity: 0;
        animation: WaterAnim 1s 0s linear infinite both;

        &:nth-child(2) {
          animation-delay: 0.2s;
        }

        &:nth-child(2) {
          animation-delay: 0.4s;
        }

        &:nth-child(2) {
          animation-delay: 0.6s;
        }
      }
    }

    > .loading-vertical-bar {
      @keyframes VerticalBarAnim {
        0% {
          transform: scaleY(1);
        }

        80% {
          transform: scaleY(0.3);
        }

        90% {
          transform: scaleY(1);
        }
      }

      height: 30px;
      text-align: center;

      > div {
        display: inline-block;
        width: 4px;
        height: 100%;
        margin: 2px;
        background-color: #279fcf;
        border-radius: 2px;
        animation: VerticalBarAnim 0.9s 0s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
        animation-fill-mode: both;

        &:nth-child(2),
        &:nth-child(4) {
          animation-delay: 0.25s;
        }

        &:nth-child(1),
        &:nth-child(5) {
          animation-delay: 0.5s;
        }
      }
    }
  }
}
